<template>
  <span>
    <a-drawer
      class="a-drawer"
      placement="right"
      :mask="false"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <div class="list-title">播放队列</div>
      <a-row>
        <a-col :span="12">
          <span>首歌曲</span>
        </a-col>
        <a-col
          :span="12"
          :style="{
            textAlign: 'right'
          }"
        >
          <nuxt-link to="/batchopera">
            <a-icon
              class="comicon"
              type="unordered-list"
              title="批量操作"
              @click="showDrawer"
            />
          </nuxt-link>
          <a-icon
            class="comicon"
            type="delete"
            title="清空"
            @click="showDrawer"
          />
        </a-col>
      </a-row>
      <div class="closediv">
        <span
          title="收起"
          class="drawerclose"
          :style="{ marginRight: '8px' }"
          @click="onClose"
        >
          <a-icon class="comicon" type="menu-unfold" />
          <span>收起</span>
        </span>
      </div>
    </a-drawer>
    <slot @click="onClose"></slot>
  </span>
</template>

<script>
export default {
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.$emit('change', false)
    }
  }
}
</script>
<style scoped>
.list-title {
  font-size: 25px;
  /*font-weight: bold;*/
}
.closediv {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;
  margin: 0px 5%;
  padding: 20px 5px;
  border-top: 1px solid #e8e8e8;
  text-align: right;
  background: #fff;
}
.drawerclose:hover {
  color: #1ece9d;
  cursor: pointer;
}
</style>
